<template>
  <div style="width: 100%; height: 100%">
    <!-- 操作系统选择器 -->
    <el-select
        v-model="selectedOs"
        filterable
        placeholder="请选择操作系统"
        clearable
        style="width: 50%; height: auto;  margin-bottom: 0px;margin-left: 500px;margin-top: auto;
             "
        @change="handleOsChange"
    >
      <el-button
          @click="cancelHighlight"
          style="margin-left: 10px;text-align: center"
      >
        取消选择
      </el-button>
      <el-option
          v-for="os in osOptions"
          :key="os.value"
          :label="os.label"
          :value="os.value">
      </el-option>
    </el-select>

    <!-- 图表容器 -->
    <div ref="chart" style="width: 100%; height: 100%;margin-bottom: 20px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { fetchData } from '../Api/api.js';

export default {
  data() {
    return {
      osTypes: [],        // 存储从后端获取的原始操作系统数据
      osOptions: [],      // 处理后的选择器选项数据
      selectedOs: '',     // 当前选中的操作系统
      chart: null         // ECharts实例
    };
  },

  async mounted() {
    // 从API获取数据
    const data = await fetchData('geteight');
    this.osTypes = data;

    // 处理数据生成选择器选项
    this.processOsOptions();

    // 初始化图表
    this.initChart();
  },

  methods: {
    // 处理操作系统数据生成选择器选项
    processOsOptions() {
      this.osOptions = this.osTypes.map(os => ({
        value: os.senderOs,  // 使用操作系统名称作为value
        label: os.senderOs   // 同时作为显示label
      }));

      // 可选：按操作系统名称排序
      this.osOptions.sort((a, b) => a.label.localeCompare(b.label));
    },

    // 操作系统选择变化处理
    handleOsChange(selectedValue) {
      if (selectedValue && this.chart) {
        // 高亮选中的操作系统
        this.chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          name: selectedValue
        });
      }
    },
    cancelHighlight() {
      if (this.chart) {
        // 清除之前的定时器
        this.highlightTimeout && clearTimeout(this.highlightTimeout);

        // 取消所有高亮状态
        this.chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0
          // 不指定name会取消该系列所有高亮
        });
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      const total = this.osTypes.reduce((sum, os) => sum + os.cnt, 0);

      const option = {
        title: {
          text: '发送人的设备操作系统分布情况',
          style: {

            fontSize: 18,
            fontWeight: 'bold',
            color: '#333',
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: params => {
            const percent = ((params.value / total) * 100).toFixed(2);
            return `${params.name}<br/>数量: ${params.value}<br/>占比: ${percent}%`;
          },
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'middle'
        },
        series: [{
          name: '操作系统',
        type:'treemap',
          visibleMin:200,
          roam:false,
          nodeClick: 'link',

          label: {
            show: true,
            formatter: params => {
              const percent = ((params.value / total) * 100).toFixed(1);
              return `${params.name} :${percent}%`;
            },
            fontSize: 12
          },
          labelLine: {
            show: true
          },
          data: this.osTypes.map(os => ({
            value: os.cnt,
            name: os.senderOs,
            osType: os.senderOs
          })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
            label: {
              show: true,
              fontSize: 14,
              fontWeight: 'bold'
            }
          },
        }],
      };

      this.chart.setOption(option);

      // 点击图表时同步选择器
      this.chart.on('click', (params) => {
        this.selectedOs = params.name;
      });

      window.addEventListener('resize', this.handleResize);

    },

    handleResize() {
      this.chart && this.chart.resize();
    },

  },
  beforeDestroy: function (){
    window.removeEventListener('click', this.handleResize);
    if (this.chart) {
      this.chart.off('null');
      this.chart.dispose();
    }
  }

};
</script>